import type {Meta, StoryObj} from '@storybook/react-webpack5';

import {Showcase} from '../../../demo/Showcase';
import {ShowcaseItem} from '../../../demo/ShowcaseItem';
import {User} from '../User';

const meta: Meta<typeof User> = {
    title: 'Components/Data Display/User',
    component: User,
    parameters: {
        a11y: {
            context: '#storybook-root',
            config: {
                rules: [
                    {
                        id: 'color-contrast',
                        enabled: false,
                    },
                ],
            },
        },
    },
};

export default meta;

type Story = StoryObj<typeof User>;

const commonProps = {
    avatar: {
        imgUrl: '',
        'aria-label': "Isaac's avatar",
        alt: 'Isaac',
    },
    name: 'Isaac',
    description: 'user@gravity-ui.com',
};

export const Default: Story = {
    args: commonProps,
};

export const UserShowcase: Story = {
    name: 'Showcase',
    render: () => {
        return (
            <Showcase title="Size">
                <ShowcaseItem title="3xs">
                    <User {...commonProps} size="3xs" />
                </ShowcaseItem>
                <ShowcaseItem title="2xs">
                    <User {...commonProps} size="2xs" />
                </ShowcaseItem>
                <ShowcaseItem title="xs">
                    <User {...commonProps} size="xs" />
                </ShowcaseItem>
                <ShowcaseItem title="s">
                    <User {...commonProps} size="s" />
                </ShowcaseItem>
                <ShowcaseItem title="m">
                    <User {...commonProps} size="m" />
                </ShowcaseItem>
                <ShowcaseItem title="l">
                    <User {...commonProps} size="l" />
                </ShowcaseItem>
                <ShowcaseItem title="xl">
                    <User {...commonProps} size="xl" />
                </ShowcaseItem>
            </Showcase>
        );
    },
};
